<template>
  <div>
    <!-- 艺术家信息 -->
    <div class="commodity">
      <el-form :model="queryParams" size="small" :inline="true" class="search">
        <el-form-item class="form" label="作者">
          <el-input v-model="searchFome.real_name" />
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            size="small"
            type="success"
            plain
            @click="Search()"
          >
            搜索
          </el-button>
          <el-button
            icon="el-icon-delete"
            size="small"
            type="primary"
            plain
            @click="reset()"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div class="artist">
        <div class="artist_ul">
          <div
            class="artist_ul_li"
            v-for="(i, index) in this.list"
            :key="index"
            @click="router_id(i)"
          >
            <div class="artist_ul_li_info">
              <div class="img">
                <svg
                  t="1713243832838"
                  class="icon"
                  viewBox="0 0 1030 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11684"
                  width="100"
                  height="100"
                >
                  <path
                    d="M230.36424 916.462014a102.584075 102.584075 0 0 1-50.392178-17.997207l-4.679273-2.879553a35.994412 35.994412 0 0 1-16.197486-15.477597 43.193295 43.193295 0 0 1 11.158268-42.833351 328.98893 328.98893 0 0 1 157.295582-86.026645h12.957989a102.94402 102.94402 0 0 0 17.277318-7.198883 35.994412 35.994412 0 0 0 14.397765-16.197486 14.757709 14.757709 0 0 1 19.436982-6.478994 14.397765 14.397765 0 0 1 6.838939 19.077039 68.029439 68.029439 0 0 1-25.915977 28.435586 104.023852 104.023852 0 0 1-22.67648 9.358547h-2.879553a39.953798 39.953798 0 0 1-10.798324 2.879553h-2.519609a300.553344 300.553344 0 0 0-143.977649 77.747931 21.236703 21.236703 0 0 0-5.399162 11.878156s2.519609 0 3.959385 1.79972l5.039218 2.879553c10.43838 7.198882 20.516815 21.956592 33.474803 24.116257s15.837541 9.358547 16.197486 17.277318a33.834748 33.834748 0 0 1 3.599441 3.599441c0 7.918771-7.918771-2.519609-15.837541-2.159665H230.36424zM777.839253 916.462014c-7.918771 0-3.959385 12.957988-3.959386 5.039217a14.757709 14.757709 0 0 1 11.878156-14.397765l15.477598-1.79972c15.837541 0 21.236703-23.396368 35.994412-28.075642a18.717094 18.717094 0 0 0 0-17.997206 65.509831 65.509831 0 0 0-20.156871-20.876759l-9.718491-7.918771a113.022455 113.022455 0 0 0-18.717095-13.677877 29.875362 29.875362 0 0 0-9.718491 0 40.313742 40.313742 0 0 1-31.315139-11.878156 42.113463 42.113463 0 0 1-6.838938-10.798324l-2.159665-4.319329h-12.957988a60.470613 60.470613 0 0 1-16.197486 0 218.126139 218.126139 0 0 1-21.956592-5.759106l-16.917373-4.679274a84.946813 84.946813 0 0 1-22.67648-7.918771l-3.959386-2.159664a22.67648 22.67648 0 0 1-13.677876-23.396368 14.397765 14.397765 0 0 1 13.317932-15.477598 14.757709 14.757709 0 0 1 15.477598 13.317933l3.599441 2.159665a54.351563 54.351563 0 0 0 14.757709 4.679273l17.997206 5.039218c6.838938 2.159665 13.317933 3.959385 20.156871 5.399162h10.078436a44.993016 44.993016 0 0 1 33.114859 8.638659 35.994412 35.994412 0 0 1 8.278715 12.598044l2.159665 3.959386s5.039218 0 10.798323 2.159664a61.550445 61.550445 0 0 1 19.796927 3.239497 122.740946 122.740946 0 0 1 26.275921 18.357151l8.278715 6.838938a88.906199 88.906199 0 0 1 28.79553 31.315139c8.638659 15.837541 0 20.516815-11.158268 35.994412a71.988825 71.988825 0 0 1-57.59106 32.754916l-13.677876 1.79972zM443.091217 480.209735h-43.913183a14.397765 14.397765 0 0 1-13.317933-15.477597 14.757709 14.757709 0 0 1 15.477598-13.317933 593.547861 593.547861 0 0 0 66.949607 0 14.397765 14.397765 0 0 1 14.757709 14.037821 14.037821 14.037821 0 0 1-13.677877 14.757709zM616.944229 480.209735h-2.159665a251.960887 251.960887 0 0 0-69.82916 0 14.757709 14.757709 0 0 1-16.55743-12.2381 14.397765 14.397765 0 0 1 12.238101-16.197486 272.837646 272.837646 0 0 1 78.467819 0 14.397765 14.397765 0 0 1-2.159665 28.79553zM514.000209 654.062747a99.344578 99.344578 0 0 1-46.072847-11.158268 14.037821 14.037821 0 0 1-6.478995-19.077038 14.397765 14.397765 0 0 1 19.436983-6.478995 75.94821 75.94821 0 0 0 68.749328 0 14.397765 14.397765 0 1 1 14.037821 25.196089 102.224131 102.224131 0 0 1-49.67229 11.518212z"
                    fill="#333333"
                    p-id="11685"
                  ></path>
                  <path
                    d="M435.53239 501.806382a14.397765 14.397765 0 0 1-14.03782-11.518212 65.869775 65.869775 0 0 1 0-23.756312 14.397765 14.397765 0 0 1 16.197485-12.2381 14.757709 14.757709 0 0 1 12.598044 15.837541 30.595251 30.595251 0 0 0 0 14.037821 14.757709 14.757709 0 0 1-11.158267 17.277318zM581.669705 500.006662a15.117653 15.117653 0 0 1-14.397765-11.518212 40.673686 40.673686 0 0 1 0-14.757709v-4.679274a14.037821 14.037821 0 0 1 10.798324-16.917374 14.397765 14.397765 0 0 1 16.917373 11.158268 40.673686 40.673686 0 0 1 0 14.757709 21.236703 21.236703 0 0 0 0 4.679274 14.037821 14.037821 0 0 1-10.798323 16.917374h-3.239497zM508.960992 843.7533a153.336197 153.336197 0 0 1-21.956592 0 205.528095 205.528095 0 0 1-135.338991-71.988824 14.397765 14.397765 0 0 1 22.316536-18.717095 174.932844 174.932844 0 0 0 116.261952 61.91039 165.574297 165.574297 0 0 0 116.981841-30.235307 14.757709 14.757709 0 0 1 20.516815 2.159665 14.397765 14.397765 0 0 1-2.159665 20.156871 191.490274 191.490274 0 0 1-116.621896 36.7143z"
                    fill="#333333"
                    p-id="11686"
                  ></path>
                  <path
                    d="M513.280321 920.061455a235.403457 235.403457 0 0 1-45.352959-4.31933 194.009883 194.009883 0 0 1-154.056086-138.218543 14.397765 14.397765 0 1 1 26.99581-10.078436c35.994412 89.626087 86.38659 110.86279 132.819382 119.861394 67.669495 13.317933 156.935638-7.198882 193.289994-83.147093a14.397765 14.397765 0 1 1 25.915977 12.2381 192.210162 192.210162 0 0 1-179.612118 103.663908zM441.291496 430.177502a41.393574 41.393574 0 0 1-21.596647-5.759106l-6.838938-5.759106-2.519609-2.159665a62.270334 62.270334 0 0 0-21.596648 0h-16.557429l-39.953798-2.159665h-8.998603a350.225633 350.225633 0 0 1-43.193295-3.959385 395.938537 395.938537 0 0 1-77.387987-22.316536c-12.2381-4.679274-38.154077-14.037821-41.393574-35.994412s18.717094-43.553239 32.754915-50.752122A227.484687 227.484687 0 0 1 259.159769 281.520578a14.397765 14.397765 0 0 1 16.917374 11.518212 14.397765 14.397765 0 0 1-11.518212 16.55743 198.689157 198.689157 0 0 0-57.231115 17.277318 31.315139 31.315139 0 0 0-17.277318 19.077039s0 5.759106 22.676479 13.317932a375.781666 375.781666 0 0 0 71.988825 20.876759 299.473511 299.473511 0 0 0 39.953798 3.599442h8.998603l40.673686 2.519608h12.957989a71.988825 71.988825 0 0 1 38.154077 5.039218L431.932949 396.702698s0 1.799721 2.519609 2.159665 5.399162 2.879553 17.997206 0a289.75502 289.75502 0 0 1 76.668099-6.838939h17.277318c25.196089 0 117.701729-6.478994 138.938432-10.798323l28.435585-5.399162c12.957988-2.159665 26.275921-4.319329 35.994413-6.838938a140.018264 140.018264 0 0 0 23.756312-7.558827l9.718491-3.599441c7.198882-2.519609 25.915977-8.998603 28.075642-14.037821s-5.759106-17.637262-15.837541-23.036424a69.82916 69.82916 0 0 0-17.277318-5.759106A51.112066 51.112066 0 0 1 740.04512 288.719461a14.397765 14.397765 0 1 1 26.995809-10.078436c1.799721 4.679274 8.998603 6.838938 20.876759 9.718492a93.945416 93.945416 0 0 1 23.756312 8.638659 48.952401 48.952401 0 0 1 28.79553 58.310948c-6.478994 17.277318-28.435586 25.196089-44.273127 30.955194l-10.43838 3.599442a185.371224 185.371224 0 0 1-27.355753 8.638659c-11.518212 2.519609-25.196089 5.039218-38.514021 7.198882l-27.355754 5.039218c-25.196089 5.039218-120.581282 11.158268-143.97765 11.518212h-17.637262a266.718596 266.718596 0 0 0-69.469216 5.759106 84.226925 84.226925 0 0 1-20.156871 2.159665z"
                    fill="#333333"
                    p-id="11687"
                  ></path>
                  <path
                    d="M287.955299 351.349738a14.397765 14.397765 0 0 1-14.397765-14.397765 20.876759 20.876759 0 0 1 0-6.478994l7.558827-14.397765a381.900716 381.900716 0 0 0 19.796927-44.633071A146.857203 146.857203 0 0 1 329.708818 216.730636a4.679274 4.679274 0 0 0 0-3.239497v-2.879553A33.114859 33.114859 0 0 1 323.949712 195.493933a33.114859 33.114859 0 0 1 17.997206-24.836145 25.556033 25.556033 0 0 0 5.039218-3.599441 84.586869 84.586869 0 0 0 8.278715-11.518212 126.340388 126.340388 0 0 1 16.557429-20.156871A100.064467 100.064467 0 0 1 503.921774 127.824437a173.133124 173.133124 0 0 1 68.749328-24.4762 89.986031 89.986031 0 0 1 27.715697 3.239497h5.039218a75.588266 75.588266 0 0 1 35.994413 20.516815 282.196193 282.196193 0 0 1 71.988824 107.983237 474.7663 474.7663 0 0 1 26.99581 93.945417 14.397765 14.397765 0 1 1-28.435586 5.039217A451.009988 451.009988 0 0 0 683.893836 246.246054a264.558931 264.558931 0 0 0-63.350166-97.184913 50.032233 50.032233 0 0 0-21.236703-12.957989h-6.11905a100.064467 100.064467 0 0 0-17.277318-4.319329 165.574297 165.574297 0 0 0-65.509831 25.196088 14.397765 14.397765 0 0 1-15.117653 0c-42.473407-26.995809-75.228322-27.355753-102.94402 0a87.106478 87.106478 0 0 0-12.598044 15.837542c-3.239497 4.679274-6.478994 9.358547-10.078435 13.677877a55.071451 55.071451 0 0 1-11.158268 9.358547l-4.679274 3.239497a55.431395 55.431395 0 0 1 2.879553 6.838938 33.474804 33.474804 0 0 1-5.759106 30.595251 124.900611 124.900611 0 0 0-22.67648 44.633071 384.420325 384.420325 0 0 1-21.236703 48.232513c-2.519609 4.319329-5.039218 9.358547-7.198882 14.037821a14.757709 14.757709 0 0 1-11.878157 7.91877z"
                    fill="#333333"
                    p-id="11688"
                  ></path>
                  <path
                    d="M557.553449 299.517785h-48.592457c-16.197486 0-30.595251-2.159665-43.553239-3.599442l-42.473407-3.239497a14.037821 14.037821 0 0 1-13.677877-14.757709 14.757709 14.757709 0 0 1 14.757709-14.037821c17.277318 0 30.595251 0 43.553239 3.239497s25.915977 2.519609 42.473407 3.239497a633.861603 633.861603 0 0 0 78.467819 0 628.462441 628.462441 0 0 0 107.983238-23.036423 14.397765 14.397765 0 0 1 17.637262 10.078435 14.037821 14.037821 0 0 1-10.078436 17.637262 611.905011 611.905011 0 0 1-114.102287 23.756312c-10.078435 0.359944-21.236703 0.719888-32.394971 0.719889zM357.424515 285.12002h-3.599441c-11.158268-2.879553-22.316536-5.399162-33.474803-7.198883a14.397765 14.397765 0 0 1-11.878156-16.55743A14.757709 14.757709 0 0 1 323.949712 249.125607c11.878156 2.159665 23.756312 4.679274 35.994412 7.558827a14.397765 14.397765 0 0 1 10.798324 17.277318 14.757709 14.757709 0 0 1-13.317933 11.158268zM477.645853 765.645426h-2.879553A121.30117 121.30117 0 0 1 395.938537 706.974533a350.945521 350.945521 0 0 1-27.715698-51.112065 376.501554 376.501554 0 0 0-23.756312-43.193295 163.054688 163.054688 0 0 1-17.997206-56.151284A119.501449 119.501449 0 0 1 287.955299 497.127109a60.470613 60.470613 0 0 1 7.198883-61.190501 14.397765 14.397765 0 0 1 18.35715-3.239497 13.677877 13.677877 0 0 1 5.039218 19.436982c-8.998603 15.837541-10.798324 22.316536-5.399162 35.994413 12.957988 32.035027 24.836145 44.993016 28.435586 46.072848a13.677877 13.677877 0 0 1 12.2381 12.598044 143.97765 143.97765 0 0 0 15.117653 52.191898 438.771888 438.771888 0 0 1 24.476201 46.432792 351.665409 351.665409 0 0 0 25.556033 47.15268 96.105081 96.105081 0 0 0 58.670892 45.712904 83.507037 83.507037 0 0 0 13.317933-4.679274 60.470613 60.470613 0 0 1 21.236703-6.11905 60.830557 60.830557 0 0 1 23.756312 4.679274 16.197486 16.197486 0 0 0 12.957989 0 119.861393 119.861393 0 0 0 35.994412-23.036424 210.207369 210.207369 0 0 0 71.988825-125.260555c0-5.399162 2.879553-10.43838 4.679273-15.837542a77.028043 77.028043 0 0 0 5.759106-23.396368 15.117653 15.117653 0 0 1 7.198883-12.2381 68.389384 68.389384 0 0 0 30.235306-51.112066 111.222734 111.222734 0 0 0 1.799721-35.994412 14.397765 14.397765 0 0 1 28.435586-6.11905 126.340388 126.340388 0 0 1-1.799721 44.993015 96.105081 96.105081 0 0 1-35.994412 67.309552 143.97765 143.97765 0 0 1-6.478994 24.4762 71.988825 71.988825 0 0 0-3.959386 12.598044 240.442675 240.442675 0 0 1-82.06726 140.738153 141.458041 141.458041 0 0 1-46.072848 28.435586 42.113463 42.113463 0 0 1-32.394971 0 35.994412 35.994412 0 0 0-13.317933-2.879553l-10.798324 3.959385a71.988825 71.988825 0 0 1-24.4762 6.838939z"
                    fill="#333333"
                    p-id="11689"
                  ></path>
                  <path
                    d="M860.626401 832.235089a467.927362 467.927362 0 0 0 126.340388-320.710215 461.808311 461.808311 0 0 0-52.911786-215.966475 17.637262 17.637262 0 0 1 0-14.757709 18.35715 18.35715 0 0 1 9.718491-11.518212 20.516815 20.516815 0 0 1 26.635865 8.278715 508.960992 508.960992 0 0 1-79.907595 582.389593l-68.02944 61.190501A514.000209 514.000209 0 0 1 0 511.524874a507.521215 507.521215 0 0 1 85.306757-281.83625 20.156871 20.156871 0 0 1 27.355754-5.399161 18.717094 18.717094 0 0 1 5.399162 28.435585A470.087026 470.087026 0 0 0 251.960887 904.583857a475.846132 475.846132 0 0 0 546.035237-15.837541z m49.312345-593.547861a19.436983 19.436983 0 0 1-15.837541-7.918771 475.846132 475.846132 0 0 0-673.455457-89.986031 20.516815 20.516815 0 0 1-28.075642-3.239497 19.796927 19.796927 0 0 1 3.599442-28.79553 515.080042 515.080042 0 0 1 729.60674 98.62469 19.436983 19.436983 0 0 1-3.959386 27.355753 18.35715 18.35715 0 0 1-11.878156 3.959386zM150.0967 198.373486a18.35715 18.35715 0 0 1-12.957989-5.399162 17.637262 17.637262 0 0 1-6.478994-12.2381 19.796927 19.796927 0 0 1 33.11486-15.477598 19.796927 19.796927 0 0 1-13.677877 35.994413z"
                    fill="#333333"
                    p-id="11690"
                  ></path>
                </svg>
              </div>
              <div class="artist_detail">
                <p>
                  艺术家:<span>{{ i.real_name }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <el-empty
          v-if="this.Empty"
          description="暂时还没有作家哦"
          :image-size="250"
        ></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
import { getartist } from "@/api/user";
export default {
  data() {
    return {
      list: [],
      Empty: true,
      // 查询参数
      queryParams: {
        title: "",
        real_name: "",
        material: "",
      },
      // 搜索
      searchFome: {
        title: "",
        real_name: "",
        material: "",
      },
      originalItemList: null,
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    getlist() {
      getartist().then((res) => {
        console.log(res);
        this.list = res.result;
        this.Empty = false;
      });
    },
    router_id(i) {
      this.$router.push({ path: "/ArtistDetails", query: { id: i.id } });
      console.log(i.id);
    },
    // 搜索
    Search() {
      // 备份原始出库列表
      if (!this.originalItemList) {
        this.originalItemList = [...this.list];
      }

      // 过滤项目列表
      this.list = this.originalItemList.filter((item) => {
        let match = true;
        for (let key in this.searchFome) {
          const searchValue = this.searchFome[key]; // 搜索条件
          const itemValue = item[key]; // 表格数据
          if (
            typeof searchValue === "string" &&
            typeof itemValue === "string"
          ) {
            // 字符串
            if (!itemValue.includes(searchValue)) {
              match = false;
              break;
            }
          } else if (searchValue !== "" && typeof itemValue === "boolean") {
            // 布尔型
            if (JSON.parse(searchValue) !== itemValue) {
              match = false;
              break;
            }
          } else if (searchValue !== "") {
            // 数值型
            if (Number(searchValue) !== itemValue) {
              match = false;
              break;
            }
          }
        }
        return match;
      });
    },
    // 重置
    reset() {
      this.searchFome = {
        item_name: "",
        specifications: "",
        category: "",
        brand: "",
      };
      this.getlist();
      return;
    },
  },
};
</script>

<style lang="less" scoped>
// @import "../../assets/css/commodity.less";
@import "../../assets/css/artist.less";
.search {
  margin: 20px 0;
}
</style>
